<script setup lang="ts">
import { computed, ref, reactive, onMounted } from "vue";
import { statistics_call } from "@/api/index";
import ReCol from "@/components/ReCol";
import Segmented, { type OptionsType } from "@/components/ReSegmented";

import { ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
  element: {
    type: Object,
    required: true,
  },
});

let curWeek = ref(0);
const optionsBasis = reactive([
  {
    label: "近两周",
    type: 1
  },
  {
    label: "本年",
    type: 2
  }
]);

const statistics = ref({
  call_connect: 0,
  call_intend: 0,
  call_refuse: 0
});

onMounted(() => {
  onSearch();
});

function onSearch() {
  statistics_call({
    type: optionsBasis[curWeek.value].type
  }).then(res => {
    let resData = res.data;
    if (resData) statistics.value = resData;
    else statistics.value = {
      call_connect: 0,
      call_intend: 0,
      call_refuse: 0
    }
  });
}
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 560
      }
    }"
  >
    <el-card shadow="never">
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <b class="text-md font-medium mr-[20px]" v-if="props.element.scope == 'department'">组内电话拨打概况</b>
          <b class="text-md font-medium mr-[20px]" v-if="props.element.scope == 'self'">我的电话拨打概况</b>
          <Segmented v-model="curWeek" :options="optionsBasis" @change="onSearch" />
        </div>
        <el-button round style="padding: 8px">了解更多<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
      </div>

      <div class="flex items-center mt-[20px]">
        <ul>
          <li>
            <span>有效拨通数</span>
            <p>{{ statistics.call_connect }}</p>
          </li>
          <li>
            <span>无意向客户数</span>
            <p>{{ statistics.call_refuse }}</p>
          </li>
          <li>
            <span>意向客户数</span>
            <p>{{ statistics.call_intend }}</p>
          </li>
        </ul>
      </div>
    </el-card>
  </re-col>
</template>

<style lang="scss" scoped>
ul {
  display: flex;
  align-items: center;

  li {
    margin-right: 80px;
    text-align: center;

    span {
      font-size: 14px;
      color: #929292;
    }

    p {
      font-size: 16px;
      color: #222222;
      font-weight: bold;
      margin-top: 8px;
    }
  }
}
</style>
